package com.example.csclient.ui.screens

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.FilledTonalButton
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun LoginScreen(
    modifier: Modifier = Modifier,
    onConnectToEmbeddedDevice: (String, String, String) -> Unit,
    onRegisterUser: (String, String) -> Unit,
    serverResponse: String
) {
    var isLoginPage by remember { mutableStateOf(true) }

    Column(
        modifier = modifier.padding(20.dp).fillMaxWidth()
    ) {
        var userNameInput by remember { mutableStateOf("") }
        var userPassword by remember { mutableStateOf("") }
        var userPasswordConfirm by remember { mutableStateOf("") }
        var usingDeviceID by remember { mutableStateOf("") }
        var hasError by remember { mutableStateOf("") }

        Text(
            text = if (isLoginPage) "连接到充电桩" else "用户注册",
            modifier = Modifier.fillMaxWidth().padding(20.dp),
            textAlign = TextAlign.Center,
            fontSize = 30.sp,
            fontWeight = FontWeight.Bold
        )
        HorizontalDivider()
        if (hasError != "") {
            Text(hasError)
        }
        if (serverResponse != "") {
            Text(serverResponse)
            if (serverResponse == "注册成功！请登陆") {
                isLoginPage = true
            }
        }
        OutlinedTextField(
            value = userNameInput,
            onValueChange = {
                userNameInput = it
                hasError = ""
            },
            label = { Text("输入用户名") },
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .padding(top = 20.dp),
            isError = hasError != "" && userNameInput == ""
        )
        OutlinedTextField(
            value = userPassword,
            onValueChange = {
                userPassword = it
                hasError = ""
            },
            label = { Text("输入密码") },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier.align(Alignment.CenterHorizontally).padding(vertical = 10.dp),
            isError = hasError != "" && userPassword == ""
        )
        if (isLoginPage) {
            OutlinedTextField(
                value = usingDeviceID,
                onValueChange = {
                    usingDeviceID = it
                    hasError = ""
                },
                label = { Text("输入充电桩编号") },
                modifier = Modifier.align(Alignment.CenterHorizontally).padding(bottom = 10.dp),
                isError = hasError != "" && usingDeviceID == ""
            )
        } else {
            OutlinedTextField(
                value = userPasswordConfirm,
                onValueChange = {
                    userPasswordConfirm = it
                    hasError = ""
                },
                label = { Text("再次输入密码") },
                visualTransformation = PasswordVisualTransformation(),
                modifier = Modifier.align(Alignment.CenterHorizontally).padding(bottom = 10.dp),
                isError = hasError != "" && userPassword != userPasswordConfirm
            )
        }
        FilledTonalButton(
            onClick = {
                if (userNameInput == "") {
                    hasError = "请输入用户名"
                } else if (isLoginPage) {
                    if (userPassword == "") {
                        hasError = "密码行为空！请输入密码"
                    } else if (usingDeviceID == "") {
                        hasError = "请输入充电桩编号"
                    } else {
                        onConnectToEmbeddedDevice(userNameInput, userPassword, usingDeviceID)
                    }
                } else {
                    if (userPassword == "") {
                        hasError = "密码行为空！请输入密码"
                    } else if (userPassword != userPasswordConfirm) {
                        hasError = "前后输入密码不一致！"
                    } else {
                        onRegisterUser(userNameInput, userPasswordConfirm)
                    }
                }
            },
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .padding(top = 10.dp)
                .padding(horizontal = 30.dp)
                .fillMaxWidth()
        ) {
            if (isLoginPage) {
                Text("连接")
            } else {
                Text("注册")
            }
        }
        TextButton(
            onClick = { isLoginPage = !isLoginPage },
            modifier = Modifier
                .align(Alignment.End)
                .padding(bottom = 10.dp)
                .padding(horizontal = 30.dp)
        ) {
            if (isLoginPage) {
                Text("没有账号？点我注册")
            } else {
                Text("已有账号？点我登陆并连接到充电桩")
            }
        }
    }
}
